<!-- Created Time:23/07/26 16:50:09 -->
<!-- Created By: Mande.Huang-->
<!-- Description: 程序坞
  使用毛玻璃效果宽度应该设置可变
-->
<template>
  <Glass class="dock" ref="dock">
    <div class="container_dock" ref="container_dock">
      <div
        class="iconsoft"
        v-for="(item, index) in softWare"
        @click="openSoftWare(index)"
        :key="index"
      >
        <icon ref="iconName">
          <img
            style="object-fit: fill"
            v-if="item.iconUrl != ''"
            :src="`http://localhost:5001/${item.iconUrl}`"
            alt=""
          />
          <div v-else>{{ item.softName }}</div>
        </icon>
      </div>
    </div>
  </Glass>
</template>
<script>
import window from "./MacComponents/Macwindow.vue";
import icon from "./MacComponents/DockIcon.vue";
import Vue from "vue";
const cloneNode_Icon = Vue.extend(icon);
const local = require("../MyUtils/localStorage");
export default {
  name: "ProgramDock",
  components: {
    window,
    icon,
  },
  data() {
    return {
      height: "",
      width: "",
      dock_width: 0,
      softWare: [],
    };
  },
  created() {
    this.bus.$on("WindowMini", this.addIcon);
  },
  async mounted() {
    await this.getDockinfo();
    this.mouseEnterDock();
  },
  computed: {
    dockisShowing() {
      return this.store.state.programDock.isShowing;
    },
  },
  watch: {
    dockisShowing: {
      handler(newVal, oldVal) {
        let node = this.$el;
        let tl = this.gsap.timeline();
        if (oldVal && !newVal) {
          tl.to(node, {
            duration: 0.2,
            y: 100 + "px",
            ease: "none",
            onComplete: () => {},
          });
        } else {
          tl.to(node, {
            duration: 0.2,
            y: 0 + "px",
            ease: "none",
          });
        }
      },
      deep: true, // 深度监听
    },
  },
  methods: {
    // 从后端数据库获取信息
    async getDockinfo() {
      const res = await this.http.get("/software");
      this.softWare = res.data.result.list;
      this.store.dispatch("GetAllsofts", this.softWare);
    },

    // 最小化的时候在dock栏添加icon图标
    addIcon(VueInstance, softID, index) {
      let softInfoOpened = this.store.state.programDock.softInfoOpened;
      if (!softInfoOpened[index].isFolder) {
        // 做个动画 将组件实例放到icon下再走
        let tl = this.gsap.timeline();
        const iconArray = this.$el.querySelectorAll(".iconsoft");
        // 不是文件夹的窗口放到icon下面节点里面
        tl.to(iconArray[softID], {
          duration: 0.2,
          scaleX: 1.2,
          scaleY: 1.2,
          ease: "",
          yoyo: true,
          repeat: 1,
        });
        return;
      }
      let Icon = new cloneNode_Icon();
      var node = document.createElement("div");
      node.classList.add("icon");
      node.style.width = 3.5 + "rem";
      node.style.height = 3.5 + "rem";
      node.style.borderRadius = 10 + "px";
      node.style.margin = "10px 8px 10px 8px";
      node.style.border = "1px red solid";
      Icon.$mount();
      VueInstance.$el.style.transform = "none";
      Icon.$el.appendChild(VueInstance.$el);
      node.appendChild(Icon.$el);
      node.addEventListener("click", (e) => {
        this.iconClick(VueInstance, node);
      });
      this.$refs.container_dock.appendChild(node);
      requestAnimationFrame(() => {
        this.mouseEnterDock();
      });
    },
    mouseEnterDock() {
      const iconArray = document.querySelectorAll(".iconsoft");
      const container_dock = document.querySelector(".container_dock");
      container_dock.style.width = iconArray.length * 4.5 + "rem";
      this.dock_width = container_dock.style.width;
      container_dock.addEventListener("mouseover", (e) => {
        // 鼠标移入执行
        const width = parseFloat(this.dock_width.split("r")[0]);
        container_dock.style.width = width * 1.2 + "rem";
      });
      container_dock.addEventListener("mouseout", (e) => {
        // 鼠标移出执行
        const width = parseFloat(this.dock_width.split("r")[0]);
        container_dock.style.width = `${width}rem`;
        this.resizeDock();
      });
      const x = container_dock.offsetWidth;
      const y = container_dock.offsetHeight;
      let MaxGap = Math.sqrt(Math.pow(x, 2) + Math.pow(y / 2, 2)) / 2;
      container_dock.addEventListener("mousemove", (e) => {
        // 获取鼠标X轴位置坐标
        const scale = 1.3; // 最大放大倍数
        const { clientX } = e;
        const dockWidth = container_dock.offsetWidth;
        const leftgap =
          (document.querySelector("body").offsetWidth - dockWidth) / 2;
        const GapX = Math.abs(clientX - leftgap);
        iconArray.forEach((item, index) => {
          const x = item.offsetLeft;
          item.style.margin = 8 + "px";
          const gapx = Math.abs(GapX - x);
          // console.log("第", index, "方块距离鼠标的水平距离", gapx)
          let itemScale = scale - gapx / (dockWidth / 2);
          if (itemScale < 1) {
            return;
          }
          const itemY = 30 * (itemScale - 1);
          item.style.scale = itemScale;
          item.style.transform = `translateY(-${itemY}px)`;
        });
      });
    },
    resizeDock() {
      const iconArray = document.querySelectorAll(".iconsoft");
      iconArray.forEach((item) => {
        item.style.margin = `10px 8px 10px 8px`;
        item.style.scale = 1;
        item.style.transform = `translateY(0px)`;
      });
    },
    iconClick(VueInstance, node) {
      this.bus.$emit("FolderWindowShow", VueInstance);
      node.remove();
      requestAnimationFrame(() => {
        this.mouseEnterDock();
      });
    },
    openSoftWare(id) {
      this.bus.$emit("opensoft", id);
    },
  },
};
</script>
<style lang="scss" scoped>
.dock {
  z-index: 9999;
  --scale: 1;
  left: 50%;
  transform: translate(-50%);
  position: absolute;
  bottom: 0;
  transition: all 0.2s ease-in-out;
  display: flex;
  border-radius: 15px;
  overflow: visible;

  .container_dock {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8vh;
    opacity: 1;
    transition: all 0.2s ease-in-out;
    overflow: visible;

    .iconsoft {
      min-width: 3.5rem;
      min-height: 3.5rem;
      // border: #111 1px solid;
      margin: 10px 8px 10px 8px;
      border-radius: 10px;
      transition: 15ms all ease-out;
      opacity: 1;
      img {
        width: 3.5rem;
        height: 3.5rem;
      }
      .Opened {
        position: absolute;
        bottom: -5px;
        height: 2px;
        width: 2px;
        background-color: #111;
        border-radius: 50%;
      }
    }
  }
}
</style>
